<template>
  <div class="order-container">
    <el-card>
      <el-form :inline="true"
               ref="search_data"
               class="demo-form-inline">
        <el-row>
          <el-form-item label="售后编号">
            <el-input v-model="search_data.keyword"
                      placeholder="输入售后编号" />
          </el-form-item>

          <el-form-item label="退款类型">
            <el-select v-model="search_data.type"
                       placeholder="请选择">
              <el-option label="退货退款"
                         :value="1">
              </el-option>
              <el-option label="仅退款"
                         :value="2">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退款原因">
            <el-select v-model="search_data.reason"
                       placeholder="请选择">
              <el-option v-for="item in code_data"
                         :key="item.value"
                         :label="item.title"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="search_data.created_at"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="danger"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top:10px">
      <div class="item"
           style="background:#f4f4f4">
        <div class="item-content">
          <div class="dingdan">商品</div>
          <div class="danjia">单价/数量</div>
          <div class="leixing">退款类型</div>
          <div class="jine">退款金额</div>
          <div class="zhuangtai ">状态</div>
        </div>
      </div>

      <el-empty v-if="table_data.length==0"
                description="暂无数据"></el-empty>
      <div v-if="table_data.length>0">
        <div class="item"
             v-for="item in table_data">
          <div class="item-header">
            编号:{{item.order_num}}<span style="margin-left:40px">下单时间:{{item.created_at}}</span>
          </div>
          <div class="item-content">
            <div class="dingdan">
              <div v-for="item1 in item.with_item"
                   class="dingdan-content">
                <el-avatar shape="square"
                           :size="60"
                           :src="item1.with_product_norm.head"></el-avatar>
                <div style="padding-left:20px">
                  <div>{{item1.with_product.title}}</div>
                  <div style="margin-top:10px;color:#999">{{item1.with_product_norm.title}}</div>
                </div>
              </div>
            </div>
            <div class="danjia">
              <div v-for="item1 in item.with_item">
                <div>x{{item1.num}}</div>
                <div style="margin-top:10px">{{item1.with_product_norm.price}}</div>
              </div>
            </div>
            <div class="leixing">
              <div>{{item.type}}</div>
            </div>
            <div class="jine">
              <div>￥{{item.price}}</div>
            </div>
            <div class="zhuangtai">
              <div v-if="item.status==-99">超时未付款</div>
              <div v-else-if="item.status==1">未支付</div>
              <div v-else-if="item.status==2">待接单</div>
              <div v-else-if="item.status==3">待发货</div>
              <div v-else-if="item.status==4">待收货</div>
              <div v-else-if="item.status==5">已完成</div>
              <div v-else>未知</div>
              <div style="margin-top:10px"><el-link type="primary">详情</el-link></div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div style="padding: 10px 0; text-align: right"
         v-if="table_data.length>0">
      <el-pagination background
                     :page-size="10"
                     layout="total, prev, pager, next"
                     :total="all_count"
                     @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/refund'
import { getList as getCodeList } from '@/api/code'

export default {
  data () {
    return {
      search_data: {
        page: 1,
        limit: 15,
        keyword: '',
        type: '',
        reason: ''
      },
      all_count: 0,
      table_data: [],
      code_data: [],
      multiple_selection: [],
    }
  },
  created () {
    this.fetchData()
    this.fetchCodeData()
  },
  methods: {
    onSearch () {
      this.fetchData()
    },
    fetchData () {
      getList().then(response => {
        this.table_data = response.data.data
        this.all_count = response.data.count
      })
    },
    fetchCodeData () {
      getCodeList({ category: 4 }).then(response => {
        this.code_data = response.data.data
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.order-container {
  color: #333;
  margin: 0 auto;
  padding: 30px;
  .main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item {
    background: #fff;
    width: 100%;
    .item-header {
      padding: 20px;
      background-color: #f4f4f4;
      color: #777;
    }
    .item-content {
      padding: 20px;
      width: 100%;
      display: flex;
      .dingdan {
        flex: 1;
        .dingdan-content {
          display: flex;
        }
      }
      .danjia {
        width: 200px;
      }
      .leixing {
        width: 200px;
      }
      .jine {
        width: 200px;
      }
      .zhuangtai {
        width: 200px;
      }
    }
  }
}
</style>
